<template>
    <div class="main">
        <div class="tree">
            <a-input-search v-model:value="searchValue" style="margin-bottom: 8px;" placeholder="Search" />
            <a-tree v-model:expandedKeys="expandedKeys" :auto-expand-parent="autoExpandParent" @expand="onExpand"
                :tree-data="treeList" :fieldNames="{ children: 'children', title: 'name', key: 'id' }">
                <template #title="{ id, name }">
                    <div @click="check({ id, name })">
                        <span v-if="name.indexOf(searchValue) > -1" v-html="getValue(name)"></span>
                        <span v-else>{{ name }}</span>
                    </div>
                </template>
            </a-tree>
        </div>

        <div class="list">
            <div class="top">
                已选列表
                <span @click="clearAll" style="cursor:pointer;margin-left: 10px;">全部清空</span>
            </div>
            <div class="item" v-for="(item, index) in checkList" :key="index">
                <MinusCircleOutlined @click="deleteConfirm(item, index)" style="cursor:pointer;color:red;" />
                <span class="name">{{ item.name }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { MinusCircleOutlined } from '@ant-design/icons-vue';
import treeDate from '@/stores/tree'
import { onMounted } from 'vue';

const searchValue = ref('')

const treeList = ref([])
const expandedKeys = ref([])
const autoExpandParent = ref(false)

const checkList = ref([])

// 左侧树过滤
const onExpand = (keys) => {
    expandedKeys.value = keys;
    autoExpandParent.value = false;
};

// 初始化数据
const tree = treeDate()
onMounted(() => {
    treeList.value = tree.treeList
    treeList.value.forEach((item) => {
        expandedKeys.value.push(item.id)
    })
})

// 获取搜索数据
const getValue = (name) => {
    const value1 = name.substr(0, name.indexOf(searchValue.value))
    const value2 = name.substr(name.indexOf(searchValue.value) + searchValue.value.length)
    return `${value1}<span style="color: #4096ff">${searchValue.value}</span>${value2}`
}

// 点击--------------------------------------------------------------------------------------------
const currentList = ref([])

const check = ({ id }) => {
    const node = findNodeById({ id: 'root', children: treeList.value }, id);
    const list = [node]
    if (list.length > 0) {
        currentList.value = []
        generateSubList(list)
    }

    if (currentList.value.length > 0) {
        if (checkList.value.length === 0) {
            checkList.value.push(...currentList.value)
        } else {
            currentList.value.forEach(item => {
                const flag = checkList.value.some(data => data.id === item.id)
                if (!flag) {
                    checkList.value.push(item)
                }
            })
        }
    }
}

// 获取选中树节点
const findNodeById = (node, id) => {
    if (node.id === id) {
        return node;
    }
    if (node.children) {
        for (let i = 0; i < node.children.length; i++) {
            const found = findNodeById(node.children[i], id);
            if (found) {
                return found;
            }
        }
    }
    return null;
}

// 获取选中所有子节点
const generateSubList = (data) => {
    for (let i = 0; i < data.length; i++) {
        currentList.value.push({ id: data[i].id, name: data[i].name })
        if (data[i].children) {
            generateSubList(data[i].children);
        }
    }
};

// 全部清空-----------------------------------------------------------
const clearAll = () => {
    checkList.value = []
}

// 删除已选
const deleteConfirm = (item, index) => {
    checkList.value = checkList.value.filter((item, i) => i !== index)
}
</script>

<style scoped lang="less">
.main {
    display: flex;

    .list {
        margin-left: 20px;
        flex: 1;

        .top {
            margin-bottom: 25px;
        }

        .item {
            margin-top: 8px;

            .name {
                margin-left: 5px;
            }
        }
    }

    .tree {
        flex: 1;
    }
}
</style>